<script setup lang="ts">
import CooperationNav from '@/components/CooperationNav/index.vue'
import EntryUploadFile from './components/EntryUploadFile/index.vue'
import APIEntry from '@/api/entry'
import { ElMessage } from 'element-plus'
const formData = ref<any>({})


function submitFormData() {
    APIEntry.setInduction(formData.value).then(() => {
        ElMessage.success('提交成功')
        formData.value = {}
    })
}

const column = [{
    label: '入职心安元素',
    jumpLink: 'Entry',
    active: true
}, {
    label: '合作伙伴',
    jumpLink: 'Cooperation'
}, {
    label: '在线客服',
    jumpLink: 'Service'
}, {
    label: '帮助中心',
    jumpLink: 'Help'
}, {
    label: '意见反馈',
    jumpLink: 'Feedback'
}]


</script>

<template>
    <div class="entry">
        <ColumnNav class="left-nav" :column="column" />
        <div class="entry-content">
            <div class="title">入职心安元素</div>
            <div class="describe">入职说明</div>
            <div class="describe essay">
                心安元素也许不是您人生中见过最好的团队，但是一定是您值得一来的团队，因为这是一支正行走在路上的存在着发展中的诸多不足管理水平与合作水平有待加强的年轻团队。正是您的出现，给了我们彼此的机会。心安元素欢迎您的到来。心安元素欢迎您和我们一起学习，共同提升，您愿意和我们一起去遇见下一个更加美好的自己吗？
            </div>
            <div class="weight-font">意向入职岗位</div>
            <el-radio-group style="margin-top: 20px;" v-model="formData.job">
                <el-radio value="运维岗位">运维岗位</el-radio>
                <el-radio value="管理岗位">管理岗位</el-radio>
                <el-radio value="行政岗位">行政岗位</el-radio>
                <el-radio value="商务岗位">商务岗位</el-radio>
                <el-radio value="财务岗位">财务岗位</el-radio>
                <el-radio value="销售岗位">销售岗位</el-radio>
                <el-radio value="系统技术岗位">系统技术岗位</el-radio>
                <el-radio value="其他岗位">其他岗位</el-radio>
            </el-radio-group>
            <el-input v-model="formData.brief" style="margin-top: 20px;" :rows="5" type="textarea"
                placeholder="请罗列您的工作履历，薪资要求，越详细越好。" />
            <EntryUploadFile style="margin: 30px 0; " v-model="formData.resume_href" title="【上传简历】" />
            <div class="relation">
                <div class="phone">联系电话：</div>
                <el-input v-model="formData.phone" placeholder="输入手机号码" style="width: 300px;" />
            </div>
            <button class="submit-btn" @click="submitFormData">提交</button>
        </div>
        <div style="clear: both;"></div>
    </div>
</template>

<style lang="scss">
.entry {
    .el-radio-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}
</style>

<style lang="scss" scoped>
.entry {
    width: 1250px;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 300px;
    font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

    .left-nav {
        float: left;
        margin-right: 50px;
    }

    .submit-btn {
        width: 202px;
        height: 38px;
        border-radius: 4px;
        background-color: rgba(249, 20, 20, 1);
        color: rgba(255, 255, 255, 1);
        font-size: 14px;
        border: none;
        margin-top: 32px;
        cursor: pointer;
    }

    .relation {
        display: flex;
        align-items: center;

        .phone {
            white-space: nowrap;
        }
    }

    .entry-content {
        width: 1000px;
        float: left;

        .weight-font {
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            margin-top: 20px;
            font-family: 'SOURCEHANSANSCN-LIGHT';
        }

        .title-describe {
            text-align: center;
        }

        .essay {
            text-indent: 2em;
        }

        .describe {
            color: rgba(154, 154, 154, 1);
            font-size: 14px;
            line-height: 30px;

            span {
                color: rgba(15, 64, 245, 1);
                cursor: pointer;
            }
        }

        .title {
            color: rgba(16, 16, 16, 1);
            font-size: 16px;
            text-align: center;
            margin-bottom: 20px;
            font-family: 'SOURCEHANSANSCN-LIGHT';
        }
    }

}
</style>
